import { useState, useEffect, useContext } from 'react'
import { Modal, Table, Tag } from 'antd'
import { CheckOutlined } from '@ant-design/icons'
import StecilIcon from './StecilIcon'
import { getObjValue } from '../utils'
import ProcessEditorContext from '../context'

const MorphChanger = ({
  visible,
  onCancel,
  dataSource,
  onChange
}) => {
  const { selectedShape } = useContext(ProcessEditorContext)

  const [selectedRow, setSelectedRow] = useState(null)

  useEffect(() => {
    if (selectedShape) {
      const id = selectedShape.getStencil().idWithoutNs()
      setSelectedRow(dataSource.find(el => el.id === id))
    }
  }, [selectedShape])

  return <Modal
    title="Change shape to:"
    visible={visible}
    onCancel={() => {
      const id = selectedShape.getStencil().idWithoutNs()
      setSelectedRow(dataSource.find(el => el.id === id))
      onCancel()
    }}
    maskClosable={false}
    keyboard={false}
    centered
    onOk={() => {
      onChange(selectedRow)
    }}
  >
    <Table
      rowKey="id"
      pagination={false}
      bordered
      size="small"
      dataSource={dataSource}
      scroll={{
        y: 300
      }}
      columns={[
        {
          key: 'id',
          dataIndex: 'id',
          title: 'Icon',
          width: 50,
          align: 'center',
          render: (text, rowData) => {
            return <StecilIcon stencil={rowData}></StecilIcon>
          }
        },
        {
          key: 'name',
          dataIndex: 'name',
          title: 'Name',
          render: (text) => {
            return getObjValue(window.lang, text)
          }
        },
        {
          key: 'selected',
          title: '选择',
          width: 50,
          align: 'center',
          render: (rowData) => {
            return selectedRow.id === rowData.id && <CheckOutlined style={{ color: '#4b4', fontSize: 22 }} />
          }
        }
      ]}
      onRow={(rowData) => ({
        onClick: () => {
          setSelectedRow(rowData)
        }
      })}
    ></Table>
  </Modal>
}

export default MorphChanger